<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1 {
				padding: 0 1rem;
			}

			.Scroll_Wrapper {
				width: 100%;
				white-space: nowrap; /* 为了把所有内容都保持在一行 */
				overflow-x: auto;  /* 如果溢出框，则应该提供滚动机制 */
				overflow-y: hidden; /* 裁剪内容 - 不提供滚动机制 */
			}

			.Item {
				display: inline-flex;/* 将对象作为内联块级弹性伸缩盒显示 */
				/* border: solid aqua; */
				/* position: relative; */
			}
			
			.Item img {
				max-height: 7.25rem;
			}
			.Caption {
				max-width: 4rem;
				padding-left: .5rem;
				font-size: 1rem;
				line-height: 1.2;
				/* border: solid red; */
				white-space: normal;
				
			}
			
			
		</style>

	</head>
	<body>
		<h1>Top fat pigs of 2019</h1>
		<nav class="Scroll_Wrapper">
			<figure class="Item">
				<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1751699849,2581502664&fm=27&gp=0.jpg alt="Big baby" />
				<figcaption class="Caption">Big baby</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3430304806,1131940970&fm=27&gp=0.jpg" alt="Flying" />
				<figcaption class="Caption">Flying</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=3046245116,2738671096&fm=85&s=7989B557161253D2049DB5E50300E039" alt="Sleeping" />
				<figcaption class="Caption">Sleeping</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1430277906,2500559072&fm=27&gp=0.jpg" alt="Drinking" />
				<figcaption class="Caption">Drinking</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=378560758,2294013983&fm=27&gp=0.jpg" alt="Thinking" />
				<figcaption class="Caption">Thinking</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=930136967,1699073428&fm=85&s=970E944EE0565DDE8D033AB90300D01E" alt="Eating secretly" />
				<figcaptio6.jn class="Caption">Eating secretly</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2292698086,3815398750&fm=85&s=059AA3754D10544548A86CEF0300E03B" alt="Sad" />
				<figcaption class="Caption">Sad</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=250029045,856017592&fm=85&app=63&f=JPEG?w=121&h=75&s=8926E91251C855E3606851DF0200C031" alt="Angry" />
				<figcaption class="Caption">Angry</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2340887620,872465590&fm=85&s=97BE7786D65B75C4533CCC48030060FF" alt="Happy" />
				<figcaption class="Caption">Happy</figcaption>
			</figure>
			
			<figure class="Item">
				<img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=3597747298,4106302212&fm=85&s=51F02D7619C458C20CDD24CA0000A0B2" alt="mua" />
				<figcaption class="Caption">mua</figcaption>
			</figure>
		</nav>
	</body>
</html>